<template>
    <div>
        <el-dialog v-model="distributeFlag" title="分配线索" width="738px">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="归属部门" label-width="80">
                    <el-tree-select v-model="distributeId" :data="distributeList" :props="cascaderProps" placeholder="请选择归属部门" check-strictly clearable />
                </el-form-item>
                <el-form-item label="分配给" label-width="80">
                    <el-select v-model="giveListParams" placeholder="选择用户" clearable>
                        <el-option v-for="item in giveList" :key="item.userId" :value="item.userId" :label="item.nickName" />
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="distributeConfirmFn()">确定</el-button>
                <el-button @click="distributeFlag = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useClueStore } from '../../../../store/modules/clue';
const cluePinia = useClueStore()
const { distributeFlag, distributeList, distributeId, giveList, giveListParams } = storeToRefs(cluePinia)
const { distributeConfirmFn } = cluePinia

// 多级联动样式
const cascaderProps = {
    value: 'id',      // 指定用 id 作为 value
    label: 'label',   // 指定用 label 作为 label
    children: 'children',
    checkStrictly: true,    // 可选择任意一级
    emitPath: true,         // 返回完整路径
    checkStrictly: true // 关键！父子节点可以独立选择
}

</script>

<style lang="scss" scoped>
.demo-form-inline .el-select:first-of-type {
    --el-select-width: 212px;
}

.demo-form-inline .el-select:last-of-type {
    --el-select-width: 240px;
}
</style>